import { Component } from 'react'
import './Tab.css'
class Tab extends Component {
    constructor(props) {
        super()
        this.state = {
            current: 0
        }
    }
    render() {
        return (
        <div className="tab">
            <ul>
                {
                    this.props.list.map((item, i) => {
                            return <li key={i} style={ {
                                color: i === this.state.current ? "#fff" : '#333',
                                background: i === this.state.current ? "blue" : "#fff"
                            } } onClick= {
                                () => {
                                    this.setState({
                                        current: i
                                    })
                                    this.props.fn(item.status)
                                }
                            }>{item.name}</li>
                    })
                }
            </ul>
        </div>
        );
    }
}
export default Tab;
